<script setup lang="ts">
  import { HMessage, HMessageBox } from '@/components/common/message'
  import infoTip from '@/config/info-tip'
  import { useGetGoodSettles, useGoodSettlesDel } from '@/services/pages/order/useGoodSettle'
  import { ElMessageBox, TableInstance } from 'element-plus'
  import { ref } from 'vue'
  import { useRouter } from 'vue-router'

  const { param, list, total, loading, getList } = useGetGoodSettles()
  const { del } = useGoodSettlesDel()

  defineOptions({
    name: 'TableGoodSettleSet',
  })

  const emits = defineEmits<{
    (e: 'select-good-settle', value: Array<string>): void
  }>()

  const tableInstance = ref<TableInstance | null>(null)
  const selectedGoodSettleIds = ref<Array<string>>([])
  const router = useRouter()

  const handleDel = (goodSettle: OrderGoodSettle) => {
    if (tableInstance.value) {
      tableInstance.value.clearSelection()
      tableInstance.value.toggleRowSelection(goodSettle, true)
      ElMessageBox({
        title: '提示',
        showCancelButton: true,
        type: 'error',
        message: infoTip.order.goodSettle.del_one,
        async beforeClose(action, instance, done) {
          if (['close', 'cancel'].includes(action)) {
            done()
            return
          }

          if (action === 'confirm') {
            instance.confirmButtonLoading = true
            instance.cancelButtonLoading = true
            const res = await del(selectedGoodSettleIds.value)
            instance.confirmButtonLoading = false
            instance.cancelButtonLoading = false
            if (res.code === 20000) {
              HMessage.success(infoTip.order.goodSettle.del_success)
              getList()
              done()
              return
            }

            HMessageBox.error(res.message)
          }
        },
      })
    }
  }

  const handleSelectGoodSettle = (goodSettles: Array<OrderGoodSettle>) => {
    selectedGoodSettleIds.value = goodSettles.map((item) => item.id)
    emits('select-good-settle', selectedGoodSettleIds.value)
  }

  const handleEdit = (id: string) => {
    router.push({ path: `/order/good/settle/update/${id}` })
  }

  defineExpose({
    getList: (_param?: typeof param.value) => {
      param.value = _param
      getList()
    },
    total,
  })
</script>

<template>
  <el-table
    :border="true"
    v-loading="loading"
    :data="list"
    ref="tableInstance"
    @selection-change="handleSelectGoodSettle"
    height="100%"
  >
    <!-- 选择 -->
    <el-table-column type="selection" fixed="left" :align="'center'" width="50"></el-table-column>

    <!-- 序号 -->
    <el-table-column
      label="序号"
      type="index"
      fixed="left"
      :align="'center'"
      width="50"
    ></el-table-column>

    <!-- 方案名称 -->
    <el-table-column
      label="方案名称"
      prop="name"
      width="200"
      show-overflow-tooltip
    ></el-table-column>

    <!-- 方案类型 -->
    <el-table-column label="方案类型" width="100">
      <template #default="{ row }">
        {{ row.type === 1 ? '产品名称' : '产品分类' }}
      </template>
    </el-table-column>

    <!-- 方案内容 -->
    <el-table-column label="方案内容" min-width="400" show-overflow-tooltip>
      <template #default="{ row }">
        {{ row.contents.map((item) => item.replace('null、', '')).join('；') }}
      </template>
    </el-table-column>

    <!-- 适用模块 -->
    <el-table-column label="适用模块" width="360" show-overflow-tooltip>
      <template #default="{ row }">
        {{ row.modules.join('、') }}
      </template>
    </el-table-column>

    <!-- 支付网点价格 -->
    <el-table-column label="支付网点价格" width="100" show-overflow-tooltip>
      <template #default="{ row }"> ￥{{ row.price.toFixed(2) }} </template>
    </el-table-column>

    <!-- 创建时间 -->
    <el-table-column label="创建时间" width="140" prop="createTime"></el-table-column>

    <!-- 更新时间 -->
    <el-table-column label="更新时间" width="140" prop="createTime"></el-table-column>

    <!-- 状态 -->
    <el-table-column label="状态" fixed="right" :align="'center'" width="70">
      <template #default="{ row }">
        <div class="flex_justify_center">
          <h-status v-if="!row.status">启用</h-status>
          <h-status v-else type="info">禁用</h-status>
        </div>
      </template>
    </el-table-column>

    <!-- 操作 -->
    <el-table-column label="操作" fixed="right" width="100">
      <template #default="{ row }">
        <h-space>
          <h-link @click="handleEdit(row.id)">编辑</h-link>
          <h-link type="error" @click="handleDel(row)">删除</h-link>
        </h-space>
      </template>
    </el-table-column>
  </el-table>
</template>
